<template>
  <view class="container">
    <sc-navbar title="上传合格证" back></sc-navbar>
    <sc-grid row-gap="19" padding="19rpx">
      <glo-search placeholder="请输入关键字搜索" v-model="listData.params.commonSerchName"
        @search="getCertificateProductList"></glo-search>
      <glo-chunk padding="19rpx 22rpx 25rpx 25rpx" v-for="item in listData.list" :key="item.id"
        @click="item.selected = !item.selected">
        <sc-flex ai="center" jc="between">
          <sc-flex ai="center" col-gap="15">
            <glo-choice :selected="item.selected" size="25"></glo-choice>
            <glo-title :title="item.productName"></glo-title>
          </sc-flex>
          <sc-icon name="arrow-right" size="20" color="primary"></sc-icon>
        </sc-flex>
        <sc-grid>
          <sc-grid ai="center" col="135rpx auto" col-gap="33">
            <glo-upload width="135" height="90" text="上传合格证" v-model="item.fileList"
              @success="(data) => singleUpload(item, data)" @delete="singleDelete"></glo-upload>
            <glo-info :info="getInfoA(item)"></glo-info>
          </sc-grid>
          <glo-info :info="getInfoB(item)"></glo-info>
        </sc-grid>
      </glo-chunk>
    </sc-grid>
    <sc-footer height="150">
      <sc-button height="75" text="批量上传" type="primary" width="262" @click="batchUpload"></sc-button>
    </sc-footer>
  </view>
</template>

<script setup>
// 导入和依赖
const temporaryStore = useTemporaryStore();

/**
 * 获取产品信息A部分
 * @param {Object} item 产品对象
 * @returns {Array} 格式化的信息数组
 */
const getInfoA = (item) => {
  return [
    {
      type: "single",
      label: "UDI编码",
      value: item.udiCode,
    },
    {
      type: "single",
      label: "商品编码",
      value: item.productCode,
    },
    {
      type: "single",
      label: "生产厂家",
      value: item.manufacturerName,
    },
    {
      type: "single",
      label: "品牌",
      value: item.brandName,
    },
    {
      type: "multiple",
      columns: "1fr 1.5fr",
      list: [
        { type: "single", label: "规格", value: item.specifications },
        { type: "single", label: "型号", value: item.model },
      ],
    },
  ];
};

/**
 * 获取产品信息B部分
 * @param {Object} item 产品对象
 * @returns {Array} 格式化的信息数组
 */
const getInfoB = (item) => {
  return [
    {
      type: "multiple",
      columns: "1fr 280rpx",
      list: [
        { type: "single", label: "生产批号", value: item.productBatchNumber },
        { type: "single", label: "生产日期", value: item.productionDate },
      ],
    },
    {
      type: "multiple",
      columns: "1fr 280rpx",
      list: [
        { type: "single", label: "有效期", value: item.validityDate },
        { type: "single", label: "追踪码", value: item.trackingCode },
      ],
    },
    {
      type: "multiple",
      columns: "1fr 280rpx",
      list: [
        {
          type: "single",
          label: "灭菌批号",
          value: item.sterilizationBatchNumber,
        },
        {
          type: "single",
          label: "灭菌效期",
          value: item.sterilizationExpirationDate,
        },
      ],
    },
  ];
};
/**
 * 获取数据部分
 */
const listData = reactive({
  params: {
    pageNo: 1,
    pageSize: 10,
    nailboxCode: temporaryStore.certificate.nailboxCode,
    boardCode: temporaryStore.certificate.boardCode,
  },
  list: [],
  total: 0,
});
const getCertificateProductList = (reset = true) => {
  if (reset) {
    listData.params.pageNo = 1;
  }
  _api.getCertificateProductList(listData.params).then((res) => {
    res.list.forEach((item) => {
      item.checked = false;
      item.fileList = [];
      if (item.certificateConformityAddress) {
        item.fileList.push({
          name: "合格证",
          url: item.certificateConformityAddress,
        });
      }
    });
    listData.list = reset ? res.list : listData.list.concat(res.list);
    listData.total = res.total;
  });
};
getCertificateProductList();
onReachBottom(() => {
  if (listData.list.length >= listData.total) {
    return;
  }
  listData.params.pageNo++;
  getCertificateProductList();
});

/**
 * 上传合格证
 */
const uploadData = reactive({
  ids: [],
  certificateConformityAddress: "",
});

const uploadCertificate = () => {
  _api
    .uploadCertificate({
      ids: uploadData.ids.join(","),
      certificateConformityAddress: uploadData.certificateConformityAddress,
    })
    .then((res) => {
      uni.$utils.toast("上传成功");
      item.fileList = [];
      uploadData.ids = [];
      uploadData.certificateConformityAddress = "";
    });
};
const singleUpload = (item, data) => {
  uploadData.ids.push(item.id);
  uploadData.certificateConformityAddress = data.url;
  uploadCertificate();
};
const batchUpload = async () => {
  const ids = listData.list
    .filter((item) => item.selected)
    .map((item) => item.id);
  if (ids.length === 0) {
    uni.$utils.toast("请选择要上传的商品");
    return;
  }
  const res = await uni.$utils.uploadImg();
  uploadData.ids = ids;
  uploadData.certificateConformityAddress = res.originalUrl;
  uploadCertificate();
};
</script>

<style lang="scss">
page {
  background: $color-bg;
}

.upload-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  width: 135rpx;
  height: 90rpx;
  background: rgba(22, 119, 255, 0.102);
  border-radius: 8rpx;
}
</style>
